import React, { Component } from 'react'
import { getAdminList, deleteAdmin } from '../../api/admin'
import { Table, Space, Button, Tag, Popconfirm, Checkbox, Drawer, Input, Select, Tree } from 'antd'
import menus from '../../router/menus'

// 处理不出现在左侧菜单栏中的数据
function filerMenu (menus) {
  const arr = []
  menus.forEach(item => {
    let obj = {}
    if (item.children) {
      obj = item // 先把一级菜单的数据拿到
      obj.children = filerMenu(item.children) // 递归获取
      arr.push(obj) // 整合数据
    } else {
      if (item.show === false) {
       
      } else {
        obj = item
        arr.push(obj)
      }
    }
  })
  // console.log(arr)
  return arr
}

// 获取Tree组件的默认打开项
function getExpandedKeys (menus) {
  const arr = []
  menus.forEach(item => {
    if (item.children) {
      arr.push(item.key)
    }
  })
  return arr
}
const { Option } = Select
class AdminList extends Component {
  state = {
    adminList: [],
    visible: false, // 控制抽屉的显示和隐藏
    expandedKeys: getExpandedKeys(menus), // 默认打开哪一项
    checkedKeys: [] // 用户选中了那一条数据
  }
  columns = [
    {
      title: '序号', render: (text,record, index) => { 
        console.log(this)
        return <span>{ index + 1}</span>
      }
    },
    {
      title: '账号', dataIndex: 'adminname'
    },
    {
      title: '角色', dataIndex: 'role', render: (text) => {
        return text === 2 ? 
        <Tag color="green">超级管理员</Tag> : 
        <Tag color="geekblue">管理员</Tag>
      }
    },
    {
      title: '操作', render: (text, record) => { // 不实用箭头函数，this为undefined
        return (<Space>
          <Button type="ghost">编辑</Button>
          <Popconfirm
            title="确定删除吗？"
            onConfirm={() => {
              deleteAdmin({
                adminid: record.adminid
              }).then(() => {
                getAdminList().then(res => {
                  console.log(res.data.data)
                  this.setState({
                    adminList: res.data.data
                  })
                })
              })
            }}
            onCancel={() => {}}
            okText="确定"
            cancelText="取消"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space>)
      }
    }
  ]
  componentDidMount () {
    getAdminList().then(res => {
      console.log(res.data.data)
      this.setState({
        adminList: res.data.data
      })
    })
  }
  render() {
    return (
      <Space direction="vertical" style={{ width: '100%'}}>
        <Space>
          <Button type="primary" onClick = { () => {
            this.setState({
              visible: true
            })
          }}>添加管理员</Button>
          <Checkbox />角色 
        </Space>
        <Table 
        dataSource = { this.state.adminList } 
        columns = { this.columns } 
        rowKey="adminid"/>
        <Drawer
          width = "600"
          title="添加管理员"
          placement="right"
          closable={true}
          onClose={() => {
            this.setState({
              visible: false
            })
          }}
          visible={ this.state.visible }
        >
          <Space direction = 'vertical'>
            <Input placeholder="管理员账号"></Input>
            <Input placeholder="密码" type="password"></Input>
            <Select defaultValue={1} style={{ width: 200}}>
              <Option value={1}>管理员</Option>
              <Option value={2}>超级管理员</Option>
            </Select>
            <Tree
              checkable
              // onExpand={onExpand}
              expandedKeys={this.state.expandedKeys}
              // autoExpandParent={autoExpandParent}
              onCheck={ (checkedKeys) => {
                console.log(checkedKeys)
                this.setState({
                  checkedKeys
                })
              }}
              checkedKeys={this.state.checkedKeys}
              // onSelect={onSelect}
              // selectedKeys={selectedKeys}
              treeData={filerMenu(menus)}
            />
            <Button type="primary" onClick = { () => {

            }}>提交</Button>
          </Space>
        </Drawer>
      </Space>
    )
  }
}
export default AdminList
